<template>
  <div class="app-container">
  <el-row :gutter="20">
    <el-col :span="8"  >
      <el-descriptions 
      title="个人信息"
      direction="vertical"
      border
      style="margin-top: 20px"
    >
      <el-descriptions-item 
        label-class-name="descriptions-label" 
        class-name="descriptions"
        :rowspan="2"
        :width="160"
        label="头像"
        align="center"
      >
        <el-image
          style="width: 100px; height: 100px"
          :src="circleUrl"
        />
      </el-descriptions-item>
      <el-descriptions-item  label-class-name="descriptions-label"  class-name="descriptions" label="名称"     align="center">{{ User.username }}</el-descriptions-item>
      <el-descriptions-item  label-class-name="descriptions-label"  class-name="descriptions" label="电话"     align="center">{{ User.phonenumber }}</el-descriptions-item>
      <el-descriptions-item  label-class-name="descriptions-label"  class-name="descriptions" label="更新日期" align="center">{{ User.update_time }}</el-descriptions-item>
      <el-descriptions-item  label-class-name="descriptions-label"  class-name="descriptions" label="邮箱"     align="center">{{ User.email }}</el-descriptions-item>
      <el-descriptions-item  label-class-name="descriptions-label"  class-name="descriptions" label="其他"     align="center">{{ User.remark }}</el-descriptions-item>

    </el-descriptions>
    </el-col>
    <el-col :span="16">
      <div  style="margin-top: 50px">
      <el-card>
        <template v-slot:header>
          <div class="clearfix">
            <span>基本资料</span>
          </div>
        </template>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本资料" name="userinfo">
            <userInfo :user="User"/>
            <!--父页面 传入数据到子页面   -->
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="resetPwd">
            <resetPwd :user="User"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    </el-col>
  </el-row>
</div>
</template>

<script setup>
import {ref} from "vue";
import { getServerUrl } from "../../utils/request";
import userInfo from './components/userInfo.vue'
import resetPwd from './components/resetPwd.vue'
// 默认显示基本资料
const activeTab=ref("userinfo") 

const User = JSON.parse(sessionStorage.getItem("currentUser"));
// 拼接头像地址
const circleUrl = getServerUrl() + "media/userAvatar/" + User.avatar;


</script>

<style scoped>

:deep(.descriptions-label) {
  height:75px;
  width:150px;
}
:deep(.descriptions) {
  height:75px;
  width:150px;
}


::v-deep .el-card__body {
  height: 360px;
}

::v-deep .box-card {
  width:400px;
}
</style>